<template>
  <div>
    <div v-if="liveList.length > 0" :class="['wrap', column == 4 ? 'wrap4' : 'wrap3']">
      <div class="item" @click="tapLive(i)" v-for="(i, k) in liveList" :key="k">
        <div class="status status1" v-if="i.status == 'NOT_STARTED'">未开始</div>
        <div class="status status2" v-else-if="i.status == 'ONGOING'">直播中</div>
        <div class="status status3" v-else-if="i.status == 'BANNED'">禁播</div>
        <div class="header">
          <div class="avtar">
            <img :src="i.feedsImg" alt=""/>
          </div>
          <div class="source">
            <div class="title">{{ i.name }}</div>
            <div class="name">
              <span>{{ i.username }}</span>
              <span>{{ day }} {{ i.startTime }} ~ {{ i.endTime }}</span>
            </div>
          </div>
        </div>
        <div class="content">
          {{ i.roomDetail || "暂无描述" }}
        </div>
      </div>
    </div>
    <Page
      v-if="liveList.length > 0"
      show-sizer
      @on-change="changePageNum"
      @on-page-size-change="changePageSize"
      :total="total"
      :page-size="params.pageSize"
    />
    <empty v-else />
  </div>
</template>

<script>
  import {getLivePage, getLiveId} from "@/api/yk_record";

  let msg = null;
  export default {
    props: {
      //gird布局几列 只能传3或4
      column: {
        type: Number,
        default: 3,
      },
      seachObj: {
        type: Object,
        default: {},
      },
    },
    data() {
      return {
        liveList: [],
        total: null,
        params: {
          pageNumber: 1,
          pageSize: 10,
        },
      };
    },
    computed: {
      day: {
        get() {
          let date = new Date();
          let m = date.getMonth() + 1;
          m = m > 10 ? m : "0" + m;
          let d = date.getDate();
          d = d > 10 ? d : "0" + d;
          return `${m}月${d}日`;
        },
        set() {
        },
      },
    },
    mounted() {
      this.getList();
    },
    methods: {
      getList() {
        let params = {
          ...this.params,
          userId: this.seachObj.userId || "",
          keywords: this.seachObj.keywords || "",
          courseCategory: this.seachObj.lxArr.join(","),
        };
        getLivePage(params).then((res) => {
          if (res.code == "200") {
            this.total = Number(res.result.total);
            this.liveList = res.result.records;
          } else {
            this.$Message.error(res.message || "获取失败");
          }
        });
      },
      // 分页 修改页码
      changePageNum(val) {
        this.params.pageNumber = val;
        this.getList();
      },
      // 分页 修改页数
      changePageSize(val) {
        this.params.pageNumber = 1;
        this.params.pageSize = val;
        this.getList();
      },
      tapLive(row) {
        getLiveId(row.id).then((res) => {
          if (res.code == 200) {
            if (res.result.status == "NOT_STARTED") {
              if (msg) this.$Message.destroy();
              msg = this.$Message.warning("该专家直播未开始");
            } else {
              this.getLivePage(res.result);
            }
          } else {
            this.$Message.error(res.message || "获取失败");
          }
        });


      },
      getLivePage(row) {
        if (row.status == "ONGOING") {
          this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
          let openWindow = null;
          let info = {
            id: 'healthy_'+this.userInfo.id,
            realName: this.userInfo.nickName || this.userInfo.realName,
            resRoomId: "", // 专家用 -的提前定义好房间号roomId   用户传
            roomId: row.oldRoomId, // 用户看直播用吃
            // roomId: '465576', // 用户看直播用，专家开播不传
            liveTitle: row.name, // 专家端的房间名称
            userAvatar:
            this.userInfo.face ||
            "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
          };
          // openWindow = window.open('http://localhost:8081/#/' + '?query=' + JSON.stringify(info))
          // openWindow = window.open('https://o2ozb.maiyuesoft.com/#/' + '?query=' + JSON.stringify(info))
          openWindow = window.open("https://health-2.westts.cn/#/" + "?query=" + JSON.stringify(info));
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .content {
    margin-top: 0.9375rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: #63676e;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header {
    display: grid;
    grid-template-columns: 3.75rem 1fr;
    align-items: center;
    grid-column-gap: 0.9375rem;
    width: 100%;
    min-width: 0;
    .avtar {
      width: 3.75rem;
      height: 3.75rem;
      border-radius: 0.25rem;
      overflow: hidden;
      background-color: #c0c0c0;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .source {
      display: flex;
      height: 3.75rem;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      min-width: 0;
      .title {
        font-size: 1rem;
        font-weight: 600;
        color: #52555a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .name {
        font-size: 0.875rem;
        font-weight: 400;
        color: #63676e;
      }
      .name span:first-child {
        margin-right: 0.625rem;
      }
    }
  }

  .wrap {
    display: grid;

    grid-gap: 1.875rem 1.6875rem;
    padding-bottom: 1.25rem;
  }

  .wrap3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .wrap4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .status1 {
    background: #f4d578;
  }

  .status2 {
    background: #aae174;
  }

  .status3 {
    background: #ff340a;
  }

  .status {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 0.875rem;
    padding: 0.2rem 0.75rem;
    border-radius: 0px 0.375rem 0px 0.375rem;

    color: #ffffff;
  }

  .item {
    position: relative;
    padding: 1.5625rem 1.25rem;
    border-radius: 0.375rem;
    cursor: pointer;
    box-shadow: 0px 0.25rem 0.625rem 0px #efeded;
    width: 100%;
    min-width: 0;
  }

  .item:hover {
    box-shadow: 0px 0.25rem 0.625rem 0px #63676e;
  }
</style>
